// eslint-disable-next-line
import React,{Component} from "react";
import "./DateSel.scss";
import BScroll from 'better-scroll';

class DateSel extends React.Component {
 
    
    constructor(props){
        super(props);
        this.left_warpper = React.createRef();
        this.right_warpper = React.createRef();
        this.columnHeight = this.remToPx(0.84);
        this.hasInit = false;
        this.year_num = 50;
        
        this.computedDate();
 
        this.state = {
            month: ["","01","02","03","04","05","06","07","08","09","10","11","12",""]
        }
 
    }
 
     /**
     * 将rem转化为px
     */ 
     remToPx = (rem)=>{
  
      let clientWidth = document.documentElement.clientWidth;
 
       return rem*100 * (clientWidth / 750) 
 
    }
 
 
    /**
     * 计算年
     */
    computedDate = ()=>{
 
       this.date = new Date();  
 
       let year = this.date.getFullYear(),year_arr=[];
 
       for(let i=this.year_num;i>=0;i--){
         year_arr.push(year);
         year--;
       }
 
       year_arr.reverse();
       year_arr.unshift("");
       year_arr.push("");
 
       this.year=year_arr;
 
       this.current_year_idx = this.year.length-2;
 
    }
 
    componentDidUpdate(){
 
         this.scrollInit();
 
    }
 
    scrollInit = ()=>{
 
        if(this.props.getModalStatus && !this.left_scroll){
 
            this.left_scroll = new BScroll(this.left_warpper.current,{
                momentum:false,
                bounceTime:250
            });
            
            let bottom__distance = -1*this.columnHeight*(this.year.length-3);
 
            this.left_scroll.on("scrollEnd",this.scrollHandler.bind(this,this.left_scroll,1));
 
            this.left_scroll.scrollTo(0,bottom__distance,0);
 
            
        }
 
        if(this.props.getModalStatus && !this.right_scroll){
            
            this.right_scroll = new BScroll(this.right_warpper.current,{
                momentum:false,
                bounceTime:250
            });
            this.right_scroll.on("scrollEnd",this.scrollHandler.bind(this,this.right_scroll,2));
            
            this.right_scroll.scrollTo(0,-1*this.columnHeight*(this.state.month.length-3),0);  
                        
        }
 
    }
 
   
    componentDidMount(){
 
        this.computedMonth(true);
 
    }
 
    computedMonth = (init = false)=>{ //init 是否是初始化状态下执行
     
        let selectedYear = this.year[this.current_year_idx];
 
        let now_year =  this.date.getFullYear();
 
        let new_month = this.date.getMonth()-0+1;
 
        if(selectedYear === now_year){ //表述选中的年是当前年
 
            let arr =[];
 
            for(let i=1;i<=new_month;i++){
              
               arr.push(this.monthHander(i));
 
            }
 
            arr.unshift("");
            arr.push("");
 
            if(init){
                this.current_month_idx = arr.length-2;
            }else{
                this.current_month_idx = 1;
            }
 
           
            this.setState({
                month:arr
            })
 
        }else{
 
            this.current_month_idx = 1;
 
            this.setState({
                month:["","01","02","03","04","05","06","07","08","09","10","11","12",""]
            })
 
        }      
 
    }
 
    monthHander = (month)=>{
      
      if(month<10){
        return "0"+month;
      }else{
        return month;  
      }
 
    }
 
    scrollHandler = (scroll,type)=>{
 
        let y = Math.abs(scroll.y);
 
        let columnHeight = this.columnHeight;
 
        let arr = (y/columnHeight).toString().split(".");
 
        let index = parseInt(arr[0]);
 
        if(arr.length === 2 && ("0."+arr[1])>=0.5){
            index++;
        }
 
        if(type === 1){ //要计算月份的值
          this.current_year_idx = index+1;
          this.computedMonth();
          if(this.right_scroll){
            this.right_scroll.scrollTo(0,0);
          }
        }else if(type === 2){
          this.current_month_idx = index+1;
          this.setState((prevState)=>{
              return {
                 month:prevState.month
              }
          })
        }
 
        scroll.scrollTo(0,-1*columnHeight*index,100);
 
    }
 
    componentWillUnmount(){
        if(this.left_scroll && this.right_scroll){
            this.left_scroll.destroy();
            this.right_scroll.destroy();
            this.left_scroll = null;
            this.right_scroll = null;
        }
    }
 
    ensure= ()=>{
        this.props.sonControllFather(this.year[this.current_year_idx],this.state.month[this.current_month_idx]);
       
    }
 
    monthFilter = (v)=>{
 
        if(!v){
          return ""; 
        }
      
     return parseInt(v)+"月"
 
    }
 
 
   render(){
 
     return (
         <div className="DateSel">
            <div className="middle_region">
                <div className="bar">
                   <div>选择日期</div>
                   <i  className="iconfont icon-cha close" onClick={this.props.close}></i>
                </div>
                <div className="change_time">
                    <div className="left_month">
                        <div>
                          <span className="line_one"></span>   
                          <span className="line_two"></span>     
                        </div>
                        <div className="left-warpper" ref={this.left_warpper}>
                           <div className="scroll-warper">
                              {
                                  this.year.map((v,index)=>{
                                      return (
                                        <div className={this.current_year_idx === index?"text current":"text"} key={index}>{v}</div> 
                                      )
                                  })
                              }                        
                            
                           </div>             
                        </div>                   
                    </div>
                    <div className="right_day">
                        <div>
                            <span className="line_one"></span>
                            <span className="line_two"></span>    
                        </div>
                        <div className="right-warpper" ref={this.right_warpper}>
                           <div className="scroll-warper">
                              {this.state.month.map((v,index)=>{
                                  return (
                                    <div className={this.current_month_idx === index?"text current":"text"} key={index}>{this.monthFilter(v)}</div> 
                                  )
                              })}                                                            
                           </div>                     
                        </div>                   
                    </div>
                </div>
                <div className="sure" onClick={this.ensure}>确定</div>
            </div>
         </div>
     )
 
   }
 
}


export default DateSel 